<template>
  <div class="location">
    <el-card class="boxcard">
      <div slot="header" class="clearfix" @click="dianji">
        <span>新增地址</span>
      </div>
      <el-table class="xia" :data="list" border style="width: 100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="addressName" label="地址名称" width="180" />
        <el-table-column prop="sendStatus " label="默认发货地址" width="180">
          <template v-slot="sisui">
            默认发货地址
            <el-switch
              v-model="sisui.row.sendStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="xiugai(sisui.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="收货人姓名" width="180" />
        <el-table-column prop="phone" label="收货人电话" width="180" />
        <el-table-column prop="name" label="收货人地址" width="180" />
        <el-table-column prop="receiveStatus " label="默认收货地址" width="180">
          <template v-slot="sisui">
            默认收货地址
            <el-switch
              v-model="sisui.row.receiveStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="gaidizhi(sisui.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column type="" fixed="right" label="操作" width="180">
          <template v-slot="sisui">
            <el-link
              class="xfq"
              :underline="false"
              type="primary"
              @click="bianji(sisui.row)"
            >编辑</el-link>
            <el-link
              class="xfq"
              :underline="false"
              type="danger"
              @click="shanchu(sisui.row)"
            >删除</el-link>
          </template>
        </el-table-column></el-table>
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="地址详情" :visible.sync="dialogFormVisible" @closed="resev">
      <el-form :model="form" label-width="150px">
        <el-form-item label="发货地址">
          <el-input v-model="form.addressName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="发货人姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="发货人手机号">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="form.postCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货地址">
          <el-cascader
            v-model="xfqyyds"
            size="large"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.detailAddress" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button
          type="primary"
          @click="xinxeng"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
// import { regionData, CodeToText } from 'element-china-area-data'
import {
  addressList,
  setSendOne,
  setReceiveOne,
  save,
  companyAddress,
  update
} from '@/api/order/location/index.js'
export default {
  data() {
    return {
      xfqwai: '',
      xfqyyds: '',
      // 三级联动的数据
      options: regionData,
      list: [],
      // 弹窗的显示与隐藏
      dialogFormVisible: false,
      // 需要上传的数据
      form: {
        addressName: '',
        city: '',
        cityCode: '',
        createTime: '',
        detailAddress: '',
        id: '',
        modifyTime: '',
        name: '',
        phone: '',
        postCode: '',
        province: '',
        receiveStatus: '',
        region: '',
        sendStatus: ''
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      addressList().then((res) => {
        // console.log(res)
        res.data.items.forEach((ele) => {
          // ele.sendStatus = ele.sendStatus ? 'true' : 'false'
          // ele.receiveStatus = ele.receiveStatus ? 'true' : 'false'
          //  写3元运算符给我自动转成 !!ele.sendStatus  这种形式了
          ele.sendStatus = !!ele.sendStatus
          ele.receiveStatus = !!ele.receiveStatus
        })
        this.list = res.data.items
      })
    },
    // 弹窗的取消
    quxiao() {
      console.log(this.form)
      this.dialogFormVisible = !this.dialogFormVisible
      this.init()
    },
    // 点击修改发货地址默认状态
    xiugai(e) {
      console.log(e)
      setSendOne({
        id: e
      }).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.init()
        } else {
          this.$message.error('修改失败')
          this.init()
        }
      })
    },
    // 点击修改收货默认地址状态
    gaidizhi(e) {
      setReceiveOne({
        id: e
      }).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.init()
        } else {
          this.$message.error('修改失败')
          this.init()
        }
      })
    },
    // 点击新增地址 弹窗e显示与隐藏
    dianji(e) {
      console.log(e)
      this.xfqwai = 1

      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 三级联动插件的事件,把省/市/区 获取到赋值给需要上传的参数
    handleChange(e) {
      console.log(e)
      // CodeToText[e[0]]   三级联动插件自带的方法
      // 省
      this.form.province = CodeToText[e[0]]
      // 市
      this.form.city = CodeToText[e[1]]
      // 区
      this.form.region = CodeToText[e[2]]
      // 地址编码,英文逗号隔开
      this.form.cityCode = e.join(',')

      console.log(this.form.cityCode)
      console.log(CodeToText[e[0]])
      console.log(CodeToText[e[1]])
      console.log(CodeToText[e[2]])
    },

    // 点击关闭弹窗，清空弹框内的数据
    resev() {
      // 点击 新增的那个关闭
      this.form = {
        addressName: '',
        city: '',
        cityCode: '',
        createTime: '',
        detailAddress: '',
        id: '',
        modifyTime: '',
        name: '',
        phone: '',
        postCode: '',
        province: '',
        receiveStatus: '',
        region: '',
        sendStatus: 0
      }
      //  点击编辑的那个关闭
      this.xfqyyds = {
        addressName: '',
        city: '',
        cityCode: '',
        createTime: '',
        detailAddress: '',
        id: '',
        modifyTime: '',
        name: '',
        phone: '',
        postCode: '',
        province: '',
        receiveStatus: '',
        region: '',
        sendStatus: 0
      }
    },
    // 点击编辑
    bianji(e) {
      console.log(e)
      this.xfqwai = 2

      console.log(e.sendStatus)
      console.log(e.receiveStatus)

      e.sendStatus = e.sendStatus ? '1' : '0'
      e.receiveStatus = e.receiveStatus ? '1' : '0'

      this.form = e
      this.xfqyyds = e.cityCode.split(',')
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 点击删除
    shanchu(e) {
      console.log(e.id)
      const id = e.id
      this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        companyAddress(
          id
        ).then(res => {
          // console.log(res)
          // console.log(res.success)
          if (res.success) {
            // this.$message('删除成功');
            this.init()
          } else {
            this.$message('删除失败')
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击确认按钮，调用新增接口
    xinxeng() {
      if (this.xfqwai === 1) {
        save(this.form).then(res => {
          console.log(res)
          if (res.success) {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.dialogFormVisible = !this.dialogFormVisible
            this.init()
          } else {
            this.$message.error('新增失败')
          }
        })
      } else if (this.xfqwai === 2) {
        update(this.form).then(res => {
          console.log(res)
          if (res.success) {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.dialogFormVisible = !this.dialogFormVisible
            this.init()
          } else {
            this.$message.error('新增失败')
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.location {
  margin: 30px;
  .boxcard {
    .clearfix {
      span {
        color: #fff;
        cursor: pointer;
        border-radius: 10px;
        padding: 10px 20px;
        background-color: #e98282;
      }
    }
    .xia {
      .xfq {
        padding: 5px 15px;
      }
    }
  }
}
</style>
